<template>
	<view class="top">
		<zbarVue></zbarVue>
		<view class="imgtop" style="height: 44px;">
			<!-- <image src="/static/index-top.png" mode=""></image> -->
			<view class="title">
				碳能商圈
			</view>
		</view>
	</view>
	<view class="content">
		<swiper class="swiper" indicator-color='#FFFFFF' indicator-active-color='#007aff' circular
			:indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay" :duration="swiper.duration">
			<swiper-item v-for="(item,index) in data.bannerList" :key="index" @click="goPage(item)">
				<image :src="item.image_text" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="ulist">
			<view class="item" v-for="(item,index) in Ulist" :key="index" @click="changItem(item,index)">
				<image :src="item.icon" mode=""></image>
				<view class="text">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="block_1" v-show="data.circleList.length!=0">
			<view class="title flex_jc_sb">
				<view class="t1">
					圈子会员
				</view>
				<view class="t2" @click="$pageGoTs('/pages/friend/friend')">
					查看更多
					<uni-icons type="right" color="#fff" size="15"></uni-icons>
				</view>
			</view>
			<view class="block_flex">
				<view class="items" v-for="(item,index) in data.circleList" :key="index">
					<image class="img" :src="item.avatar_text" mode="aspectFill"></image>
					<view class="items_r">
						<view class="">
							{{item.name}}
						</view>
						<view class="tip">
							第{{item.meeting_num}}期会员
						</view>
					</view>
				</view>
			</view>
			<view class="ads" v-if="data.userInfo.is_circle == 0">
				<image src="/static/tbcg.png" mode=""></image>
				<view class="adstext flex_jc_sb">
					<view class="text">您还不是圈子成员</view>
					<view class="btn" @click="$pageGo('/pages/user/apply')">
						去申请
						<uni-icons type="right" color="#0973ED" size="15"></uni-icons>
					</view>
				</view>
			</view>

		</view>
		<view class="block_2">
			<view class="title flex_jc_sb" @click="$pageGo(`/pages/knowledge/knowledgedetail?id=${data.cateInfo.id}`)">
				<view class="flex">
					<view class="text">
						{{data.cateInfo.name}}
					</view>
					<view class="tip">
						会员免费
					</view>
				</view>
				<view class="price">
					<text>￥</text>{{data.cateInfo.price}}
				</view>
			</view>

			<view class="block_flex">
				<view class="items" v-for="(item,index) in data.courseList" :key="index" @click="pageGo(item)">
					<view class="img ">
						<image class="imgs" :src="item.image_text" mode="aspectFill"></image>
						<!-- <view class="absimg flex_jc_cent" v-if="item.type == 1">
							<image src="/static/video.png" mode=""></image>
						</view> -->
					</view>
					<view class="items_r">
						{{item.title}}<span v-if="item.type == 2">.{{item.file_load_suffix_text}}</span>
					</view>
				</view>
			</view>
			<image class="ads" src="/static/videoads.png" mode=""></image>

			<view class="btn flex_jc_cent" @click="$pageGoTs('/pages/knowledge/knowledge')">
				<view class="flex">
					查看更多
					<image src="/static/right.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="block_3">
			<view class="title flex_jc_sb">
				<view class="t1">
					圈子大会
				</view>
				<view class="t2" @click="$pageGo('/mainPage/meeting')">
					查看更多
					<uni-icons type="right" color="#5D5D70" size="15"></uni-icons>
				</view>
			</view>
			<view class="block_flex">
				<view class="items" v-for="(item,index) in data.meetingList" :key="index"
					@click="$pageGo(`/mainPage/meetingdetail?id=${item.id}`)">
					<image class="imgs" :src="item.image_text" mode="aspectFill"></image>
					<view class="items_r">
						<view class="ftit">{{item.title}}</view>
						<view class="flex" style="margin-top: 20rpx;">
							<image class="icon" src="/static/c1.png" mode=""></image>
							<view class="text">
								{{time(item.start_time)}}
							</view>
						</view>
						<view class="flex" style="margin:10rpx 0rpx;">
							<image class="icon" src="/static/c2.png" mode=""></image>
							<view class="text">
								{{item.city}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 66rpx;">
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		getCurrentInstance
		
	} from 'vue';
	import {
		onLoad,
		onShow,
		onUnload,
		onHide
	} from '@dcloudio/uni-app'
	import {
		login,
		getBanner,
		getCircleList,
		getCourse,
		getCourseList,
		getUserinfo,
		getMeetingList
	} from '@/common/http.api.js';
	import zbarVue from '@/components/zbar/zbar.vue';
	import i1 from '@/static/i1.png'
	import i2 from '@/static/i2.png'
	import i3 from '@/static/i3.png'
	import i4 from '@/static/i4.png'
	const data = reactive({
		bannerList: [],
		circleList: [],
		courseList: [],
		meetingList: [],
		userInfo: {},

		cateInfo: {}
	})

	const time = computed(() => {
		return (tt) => {
			let timenum = tt * 1000
			const date = new Date(timenum);
			// 补零函数
			const padZero = num => num.toString().padStart(2, '0');
			// 提取日期各部分
			const year = date.getFullYear();
			const month = padZero(date.getMonth() + 1); // 月份从0开始需+1
			const day = padZero(date.getDate());
			const hours = padZero(date.getHours());
			const minutes = padZero(date.getMinutes());
			const seconds = padZero(date.getSeconds());
			// 周几映射（0: 周日，1: 周一，...）
			const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
			const weekday = weekdays[date.getDay()];
			// 拼接格式：YYYY-MM-DD HH:mm:ss 周X
			return `${month}/${day} ${hours}:${minutes} | 周${weekday}`;
		}
	})
	onShow(()=>{
		if(uni.getStorageSync('cirleToken')){
			getUserinfo({}).then(res=>{
				data.userInfo = res.data
				uni.setStorageSync('user',res.data)
			})
		}
		getCircleList({
			limit: 5
		}).then(res => {
			data.circleList = res.data
		})
		getCourse().then(res => {
			data.cateInfo = res.data[0]
			getCourseList({
				cate_id: res.data[0].id
			}).then(cate => {
				console.log(cate);
				data.courseList = cate.data
			})
		})
		getMeetingList({
			limit: 5
		}).then(res => {
			data.meetingList = res.data
		})
	})
	onLoad(() => {
		
		getBanner().then(res => {
			data.bannerList = res.data
		})
		

	})
	function goPage(item){
		console.log(item.jump_type);
		if(item.jump_type == 1){
			uni.switchTab({
				url:'/pages/friend/friend'
			})
		}else if(item.jump_type == 2){
			uni.switchTab({
				url:'/pages/knowledge/knowledge'
			})
		}else if(item.jump_type == 3){
			uni.navigateTo({
				url:'/mainPage/meeting'
			})
		}
	}
	const swiper = reactive({
		indicatorDots: true,
		autoplay: true,
		duration: 500
	})
	function pageGo(item) {
		//没有购买就弹窗
		let level = uni.getStorageSync('user').level?uni.getStorageSync('user').level:0
		if (data.cateInfo.is_pay == 0 && level == 0) {
			uni.showModal({
				title:'系统提示',
				content: '购买课程可全部查看！',
				confirmText:'去购买',
				confirmColor:'#0756FF',
				success: (res) => {
					if (res.confirm) {
						uni.navigateTo({
							url: `/pages/knowledge/knowledgedetail?id=${data.cateInfo.id}`
						})
					} else if (res.cancel) {}
				}
			});
			return
		}
		// 视频跳转 图文跳转
		if (item.type == 2) {
			wx.showLoading({
				title: "资源下载中...",
			});
			wx.downloadFile({
				url: item.file_load_text, //后端返回的pdf路径
				filePath: `${wx.env.USER_DATA_PATH}/${item.title}.${item.file_load_suffix_text}`, //自定义pdf文件名
				success: function(res) {
					const filePath = res.filePath || res.tempFilePath
					console.log(res);
					wx.openDocument({
						showMenu: true, //分享按钮
						filePath: filePath,
						success: function(res) {
							wx.hideLoading();
						}
					})
				}
			})
			// uni.navigateTo({
			// 	url: `/pages/knowledge/textdetail?id=${item.id}`
			// })
		}
		if (item.type == 1) {
			uni.navigateTo({
				url: `/pages/knowledge/knowledgedetail?id=${data.cateInfo.id}&videoId=${item.id}`
			})
		}
	}
	const Ulist = reactive([{
			name: '圈子成员',
			icon: i1,
			path: '/pages/friend/friend'
		},
		{
			name: '圈子课程',
			icon: i2,
			path: '/pages/knowledge/knowledge'
		},
		{
			name: '圈子大会',
			icon: i3,
			path: '/mainPage/meeting'
		},
		{
			name: '合作商机',
			icon: i4,
			path: '/pages/business/business'
		}
	])

	function changItem(item, index) {
		if (index == 2) {
			uni.navigateTo({
				url: item.path
			})
		} else {
			uni.switchTab({
				url: item.path
			})
		}
	}
</script>
<script>
	export default {
		onShareAppMessage() {
			return {
				title: '欢迎使用碳能商圈！',
				path: `pages/index/index`,
			}
		},
		onShareTimeline() {
			return {
				title: '欢迎使用碳能商圈！',
				path: `pages/index/index`,
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(90deg, #E5F8FF 0%, #FFF3F8 100%);
	}

	.top {
		width: 100%;
		position: sticky;
		top: 0%;
		background: linear-gradient(90deg, #E5F8FF 0%, #FFF3F8 100%);
		z-index: 9;

		.imgtop {
			height: 44px;
			line-height: 44px;
			padding: 0rpx 22rpx;
			box-sizing: border-box;
			text-align: center;
			image {
				width: 174rpx;
				height: 35rpx;
			}
			.title{
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
			}
		}
	}



	.swiper {
		width: 100%;
		width: 710rpx;
		height: 280rpx;
		margin: 0rpx auto;

		image {
			width: 710rpx;
			height: 280rpx;
			border-radius: 20rpx;
		}
	}

	.ulist {
		display: flex;
		width: 710rpx;
		margin: 30rpx auto;
		justify-content: space-evenly;

		.item {
			text-align: center;

			image {
				width: 80rpx;
				height: 80rpx;
			}

			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #000000;
			}
		}

	}

	.block_1 {
		width: 710rpx;
		margin: 20rpx auto;
		background: linear-gradient(126deg, #58A4FF 0%, #006FFF 100%);
		border-radius: 20rpx;
		position: relative;
		box-sizing: border-box;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			padding: 16rpx 20rpx;

			.t2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				line-height: 26rpx;
			}
		}

		.ads {
			width: 100%;
			height: 100rpx;

			image {
				width: 100%;
				height: 100rpx;
			}
		}

		.adstext {
			width: 100%;
			height: 100rpx;
			position: absolute;
			bottom: 0%;
			padding: 20rpx 22rpx;
			box-sizing: border-box;

			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 38rpx;
			}

			.btn {
				width: 160rpx;
				height: 64rpx;
				background: linear-gradient(270deg, #DEEAFF 0%, #FFFFFF 50%, #DEEAFF 100%);
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 1px solid #FFFFFF;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #0973ED;
				text-align: center;
				line-height: 64rpx;
			}
		}

		.block_flex {
			width: 100%;
			white-space: nowrap;
			flex-direction: row;
			overflow-x: auto;
			display: flex;

			.items {
				display: flex;
				margin: 0rpx 0rpx 20rpx 20rpx;
				align-items: center;
			}

			.img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50rpx;
			}

			.items_r {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				height: 90rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				margin-left: 16rpx;

				.tip {
					font-size: 20rpx;
					color: #8A3E00;
					line-height: 40rpx;
					height: 40rpx;
					background: linear-gradient(223deg, #FFC393 0%, #FFE9D9 100%);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1px solid #F9B781;
					padding: 0rpx 6rpx;
				}
			}
		}
	}

	.block_2 {
		width: 710rpx;
		height: 450rpx;
		background: linear-gradient(138deg, #F6FAFF 0%, #D1E5FF 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto;
		position: relative;

		.ads {
			width: 170rpx;
			height: 118rpx;
			position: absolute;
			bottom: 0%;
			right: 0%;
		}

		.title {
			width: 710rpx;
			height: 76rpx;
			background: linear-gradient(90deg, #3792FF 0%, #0ECBFF 100%);
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 16rpx 20rpx;
			box-sizing: border-box;

			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.tip {
				width: 92rpx;
				height: 37rpx;
				background: linear-gradient(223deg, #FFC393 0%, #FFE9D9 100%);
				border-radius: 10rpx;
				border: 1px solid #FFFFFF;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 20rpx;
				color: #8A3E00;
				line-height: 37rpx;
				text-align: center;
				margin-left: 15rpx;
			}

			.price {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 40rpx;
				color: #FFFFFF;

				text {
					font-size: 28rpx;
				}
			}
		}

		.block_flex {
			width: 100%;
			flex-direction: row;
			overflow-x: auto;
			display: flex;
			margin-top: 24rpx;

			.items {
				margin-left: 20rpx;
				width: 300rpx;
				height: 270rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				padding: 10rpx;
				box-sizing: border-box;
			}

			.img {
				width: 280rpx;
				height: 160rpx;
				border-radius: 10rpx;
				position: relative;

				.imgs {
					width: 280rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}

				.absimg {
					width: 280rpx;
					height: 160rpx;
					top: 0%;
					position: absolute;
					background: rgba(0, 0, 0, 0.3);
					border-radius: 10rpx;

					image {
						width: 60rpx;
						height: 60rpx;
					}
				}
			}

			.items_r {
				margin-top: 10rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #6B6B6B;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2; //几行就填几
				-webkit-box-orient: vertical;
			}
		}

		.btn {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #0756FF;
			margin-top: 22rpx;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 10rpx;
			}
		}

	}

	.block_3 {
		width: 710rpx;
		margin: 20rpx auto;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;

			.t2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				line-height: 26rpx;
				color: #5D5D70;
			}
		}


		.block_flex {
			width: 100%;
			flex-direction: row;
			overflow-x: auto;
			display: flex;
			margin-top: 24rpx;

			.items {
				margin-right: 20rpx;
				width: 420rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				padding: 10rpx;
				box-sizing: border-box;
			}

			.imgs {
				width: 400rpx;
				height: 260rpx;
				border-radius: 10rpx;
				position: relative;
			}

			.items_r {
				margin-top: 10rpx;

				.ftit {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #000000;
					line-height: 35rpx;
					margin-bottom: 10rpx;
				}

				.icon {
					width: 28rpx;
					height: 28rpx;
				}

				.text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #616169;
					margin-left: 10rpx;
				}

				.texts {
					margin-top: 10rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #979797;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.block_flex::-webkit-scrollbar {
		display: none;
	}
</style>